<template>
  <div class="loginPage">
     <div class="pictruePart">
        <img src="../../assets/LOGO_49.png" alt="">
     </div>

  <div class="user">
         <img class="mobilePictrue" src="../../assets/手机_96.png" alt="" >
         <input class="mobile" type="tel"  placeholder="请输入手机号" maxlength="11" autocomplete="off" v-model="form.tel">  
         <img class="passwordPictrue" src="../../assets/密码.png" alt="">
         <input class="password" type="password"  placeholder="请输入密码" maxlength="15" autocomplete="off" v-model="form.password">
         <router-link to="/forget" class="forgetPassword" >忘记密码?</router-link>
         <el-row><el-button type="primary" @click="submit">登录</el-button></el-row>
         <div class="help">
           <router-link to="/changePassword" class="helpCenter">帮助中心</router-link>
           <router-link to="http://www.1sedu.com/" class="officialWebsite">一生教育官网</router-link>
         </div>
 </div>
</div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        tel: "",
        password: ""
      }
    };
  },
  created() {
    // let loginCookie = this.utils.cookie('get','user');
    // if(loginCookie){
    //   this.$router.push({path:'/main'})
    // }
  },
  methods: {
    submit() {
      if (!/^1[3|4|7|5|8]\d{9}$/.test(this.form.tel)) {
        return alert("请输入正确的手机号");
      }
      if (!/^[a-zA-Z0-9]{6,15}$/.test(this.form.password)) {
        return alert("请输入正确的密码");
      }
      this.form.password = md5(this.form.password) + "Ysjymd@5";
      this.form.password = md5(this.form.password);
      console.log(this.utils.SGIN_USER);

      this.utils.$post(
        this.utils.SGIN_USER,
        data => {
          if (data.data) {
            this.$router.push({ path: "/main" });
          }
        },
        this.form
      );
    }
  }
};
</script>


<style lang="less">
.loginPage {
  width: 420px;
  vertical-align: middle;
  margin:150px auto;
  border: 1px solid #dddddd;
  border-radius: 4px;
  .pictruePart {
    border-bottom: 1px solid #dddddd;
    > img {
      margin: 60px auto;
      display: flex;
      justify-content: center;
    }
  }
  .user {
    > input:focus {
      color: #232323;
    }
    font-size: 14px;
    position: relative;
    height: 403px;
      .mobile {
      border-radius: 4px;
      box-shadow: 0 0 2px 1px #bdc4c9;
      border-width: 0;
      border: 0;
      height: 46px;
      font-size: 14px;
      color: #cccccc;
      width: 298px;
      line-height: 298px;
      text-indent: 40px;
      margin-top: 60px;
      margin-left:60px ;
    }
    .mobilePictrue {
      position: absolute;
      left: 73px;
      top: 73px;
       
    }
    .password {
      border-radius: 4px;
      border-width: 0;
      box-shadow: 0 0 2px 1px #bdc4c9;
      border: 0;
      margin-top: 30px;
      height: 46px;
      font-size: 14px;
      color: #cccccc;
      width: 298px;
      line-height: 298px;
      text-indent: 40px;
      margin-left:60px ;
    }
    .passwordPictrue {
      position: absolute;
      left: 73px;
      top: 148px;
    }
    .forgetPassword {
      font-size: 12px;
      color: #999999;
      position: absolute;
      right: 60px;
      top: 200px;
      z-index: 999;
    }
    .el-button--primary {
      // display: inline-block;
      width: 298px;
      margin-top: 60px;
       margin-left:60px ;
    }
    .help {
      margin-top: 40px;
      // margin-bottom: 60px;
      .helpCenter {
        font-size: 14px;
        color: #999999;
        position: absolute;
        left: 60px;
        bottom: 60px;
      }
      .officialWebsite {
        font-size: 14px;
        color: #399bff;
        position: absolute;
        right: 60px;
        bottom: 60px;
      }
    }
  }
}
</style>
 